<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            <div class="btn-wrapper clearfix">
                <a-row class="text-center clearfix">
                    <a-col :xs="24" :sm="24" :md="24" :lg="16" :xl="12">
                        <a-col :span="2" >
                            <div class="btns" @click="addItem">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">新增</div>
                            </div>
                        </a-col>
                         <a-col :span="2" >
                            <div class="btns" @click="editItemFun">
                                <a-icon class="btns-icon" type="file-add" />
                                <div class="btns-text">编辑</div>
                            </div>
                        </a-col>
                         <a-col :span="2" >
                            <div class="btns" @click="batchDelete">
                                <a-icon class="btns-icon" type="delete" />
                                <div class="btns-text">删除</div>
                            </div>
                        </a-col>
                        <a-col :span="2">
                            <div class="btns" @click="reLoadData">
                                <a-icon class="btns-icon" type="file-sync" />
                                <div class="btns-text">刷新</div>
                            </div>
                        </a-col>
                         
                        
                    </a-col>
                </a-row>
            </div>
            
        </div>
        <nly-content>
            <!-- 线路列表 -->
            <a-table :columns="columns" :data-source="data" bordered :scroll="{ x: 1000, y: 500}" :pagination="pagination" :row-selection="rowSelection"  @change="onTableChange" :loading="false">
            </a-table>
            <!-- modal 弹窗  -->
            <drag-modal :visible="editModal" centered :title="editItem.id ? '编辑线路' : '新增线路'" width="550px" @cancel="hideModal">
                <div class="renwu-from">
                    <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>业务类型</div>
                    <div class="renwu-secend"><a-input v-model="editItem.businessType"/></div>
                </div>
                <div class="renwu-from">
                    <div class="renwu-frisht">外显</div>
                    <div class="renwu-secend"><a-input v-model="editItem.externalDisplay"/></div>
                </div>
                <div class="renwu-from">
                    <div class="renwu-frisht">外呼时间段</div>
                    <div class="renwu-secend"><a-input v-model="editItem.callTime"/></div>
                </div>
                <div class="renwu-from">
                    <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>资费（元/分钟）</div>
                    <div class="renwu-secend"><a-input v-model="editItem.callCharges"/></div>
                </div>
                <div class="renwu-from" >
                    <div class="renwu-frisht"><span style="color:red;padding-right: 3px;">*</span>月低费</div>
                    <div class="renwu-secend"><a-input v-model="editItem.monthlyMinCharges"/></div>
                </div>
                <div class="renwu-from" >
                    <div class="renwu-frisht">并发</div>
                    <div class="renwu-secend"><a-input v-model="editItem.concurrentStr"/></div>
                </div>
                <div class="renwu-from" >
                    <div class="renwu-frisht">盲区</div>
                    <div class="renwu-secend"><a-input v-model="editItem.blindArea"/></div>
                </div>
                <div class="renwu-from" >
                    <div class="renwu-frisht">外呼次数限制</div>
                    <div class="renwu-secend"><a-input v-model="editItem.limitTimes"/></div>
                </div>
                <div class="renwu-from" >
                    <div class="renwu-frisht">投诉比</div>
                    <div class="renwu-secend"><a-input v-model="editItem.complaintRatio"/></div>
                </div>
                 <div class="renwu-from" >
                    <div class="renwu-frisht">需要提供的资料</div>
                    <div class="renwu-secend"><a-textarea placeholder="请输入250字内" :rows="1" v-model="editItem.provideData"/></div>
                </div>
                <div class="renwu-from">
                    <div class="renwu-frisht">备注</div>
                    <div class="renwu-secend"><a-textarea placeholder="请输入250字内" :rows="1" v-model="editItem.remarks"/></div>
                </div>
                <template slot="footer">
                    <a-button :style="{ marginLeft: '8px' }" @click="hideModal">关闭</a-button>
                    <a-button type="primary" @click="handleSubmit">确定</a-button>
                </template>
            </drag-modal>
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import moment from "moment";
import { mapState } from "vuex";
import { FormInput, EditableCell } from "@/components/Form";
import {  pageList ,save ,batchDelete } from "@/api/crm/call/numberPool";


export default {
    components: {
        FormInput,
        EditableCell,
    },
    data () {
        const columns = [
            {
                align: "left",
                title: "业务类型",
                dataIndex: "businessType",
                width: 120,
            },
             {
                align: "center",
                title: "外显",
                dataIndex: "externalDisplay",
                width: 100,
            },
             {
                align: "center",
                title: "外呼时间段",
                dataIndex: "callTime",
                width: 100,
            },
            {
                align: "left",
                title: "资费（元/分钟）",
                dataIndex: "callCharges",
                width: 80,
            },
            {
                align: "left",
                title: "月低费",
                dataIndex: "monthlyMinCharges",
                width: 80,
            },
            {
                align: "center",
                title: "需要提供的资料",
                dataIndex: "provideData",
                width: 200,
            },
            {
                align: "center",
                title: "并发",
                dataIndex: "concurrentStr",
                width: 60,
            },
            {
                align: "center",
                title: "盲区",
                dataIndex: "blindArea",
                width: 120,
            },
            {
                align: "center",
                title: "外呼次数限制",
                dataIndex: "limitTimes",
                width: 80,
            },
              {
                align: "center",
                title: "投诉比",
                dataIndex: "complaintRatio",
                width: 70,
            },
            {
                align: "center",
                title: "备注",
                dataIndex: "remarks",
                width: 200,
            }
        ];
        return {
            editModal: false,
            postData: {
                status:null,
                page:{
                    "current": 1,
                    "size": 20
                }
            },
            selectedKeys: [], //工序table选中key
            selectedData: [],
            pagination: {
                defaultPageSize: 20,
                size: "small",
                current: 1,
                pageSize: 20,
                total: 0,
                showTotal: total => {
                    return (
                        <div>
                            共 {total} 条数据，每页
                            <a-input-number
                                value={this.pagination.pageSize}
                                min={1}
                                max={500}
                                onPressEnter={e => this.changePageSize(e)}
                            />
                            条
                        </div>
                    );
                },
                showQuickJumper: true,
                showLessItems: true
            },
            numberReg: /^[1-9]{1}[0-9]*$/,
            floatReg: /^-?[0-9]*(\.[0-9]*)?$/,
            data: [],
            columns,
            editItem: {

            }, //新增/编辑对象
        };
    },
    created(){
        this.pageList();
    },
    mounted(){

    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        rowSelection() {
            let { userInfo } = this;
            return {
                columnWidth:30,
                selectedRowKeys:this.selectedKeys,
                onChange: this.userSelection,
                // getCheckboxProps: record => ({
                //     props: {
                //         disabled: userInfo.id != record.createUserId || record.businessStatus !== 0, 
                //     },
                // }),
            };
        },
    },
    watch: {
       
    },
    methods: {
        moment,
        reLoadData(){
            this.pageList();
        },
         //点击分页
        onTableChange (pagination, filters, sorter) {
            Object.assign(this.postData, {
                page:{
                    size:pagination.pageSize,
                    current: pagination.current,
                }
            });
            Object.assign(this.pagination, {
                current: pagination.current,
                pageSize: pagination.pageSize
            });
            this.pageList();
        },
        //改变 分页大小
        changePageSize (e) {
            const value = e.target.value;
            Object.assign(this.postData, {
                page:{
                    size: value,
                    current: 1,
                }
            });
            Object.assign(this.pagination, {
                pageSize: Number.parseInt(value),
                current: 1,
            });
            this.pageList();
        },
        userSelection (keys, rows) {
            this.selectedKeys = [];
            this.selectedKeys = keys;
            this.selectedData = rows;
        },
        openModal(editItem){
            this.editModal = true;
            this.editItem = editItem;
        },
        hideModal () {
            this.editModal = false;
        },
        //新增
        addItem () {
            let editItem = {
                
            };
            this.openModal(editItem);
        },
        //编辑
        editItemFun () {
             if (this.selectedKeys.length != 1) {
                this.$message.warning('请选择一条记录');
                return;
            }
            let item = this.selectedData[0];
            let editItem = {...item};
            this.openModal(editItem);

        },
        //获取列表
        pageList () {
            const { postData } = this;
            pageList(postData).then(response => {
                console.log("获取外呼任务列表", response);
                if (response.code === 200) {
                    const { data } = response;
                    const { records, total, current, size } = data;
                    this.data = records;
                    this.data.forEach(item => {
                        item.key = item.id;
                    });
                    Object.assign(this.pagination, {
                        total,
                        current,
                        pageSize: size
                    });
                }
            }).catch(error => { });
        },
        //批量删除
        batchDelete () {
            let _this = this;
            if (this.selectedKeys.length < 1) {
                this.$message.warning('请选择记录');
                return;
            }
             this.$confirm({
                title: '确认',
                content: <span>您确定要{<span style='color:red;'>删除</span>}这些记录吗？</span>,
                onOk () {
                     batchDelete(_this.selectedKeys).then(response => {
                        if (response.code == 200) {
                            _this.$message.success("删除成功");
                            _this.selectedKeys = [];
                            _this.selectedData = [];
                            //刷新 列表
                            _this.pageList();
                        }
                    });
                },
                onCancel () { },
            });
           
        },
        //条件改变
        onConditionChange(){
            Object.assign(this.postData.page,{current:1});
            this.pageList();
        },
        //保存 任务
        handleSubmit (e) {
            e.preventDefault();
            const {editItem} = this;
            delete editItem.createDate;
            delete editItem.createUserName;
            delete editItem.createUserId;
            if(!editItem.businessType){
                this.$message.error("请输入业务类型");
                return;
            }
            if(!editItem.callCharges){
                this.$message.error("请输入资费");
                return;
            }
             if(!editItem.monthlyMinCharges){
                this.$message.error("请输入月低费");
                return;
            }
            console.log("开始保存:", editItem);
            save(editItem).then(response => {
                if (response.code === 200) {
                    this.$message.success("保存成功")
                    //刷新 列表
                    this.selectedKeys = [];
                    this.selectedData = [];
                    this.hideModal();
                    this.pageList();
                } else {
                    this.$message.error("保存失败");
                }
            });
        },
    }
};
</script>
<style scoped >
   
    .form-inline label {
        justify-content: left !important;
    }
    .form-inline > .col {
        margin-bottom: 1.5rem !important;
    }
    .icons-list >>> .anticon {
        margin-right: 8px;
        font-size: 16px;
    }
    .ant-advanced-search-form {
        padding: 24px;
        background: #fbfbfb;
    }

    .ant-advanced-search-form .ant-form-item {
        display: flex;
        margin-bottom: 0px !important;
    }

    .ant-advanced-search-form .ant-form-item-control-wrapper {
        flex: 1;
    }

    #components-form-demo-advanced-search .ant-form {
        max-width: none;
    }
    #components-form-demo-advanced-search .search-result-list {
        margin-top: 16px;
        background-color: #fafafa;
        min-height: 200px;
        text-align: center;
        padding-top: 80px;
    }

    
</style>
<style lang="less" scoped>
   .renwu-from {
         display: flex;
         min-height: 35px;
         line-height: 35px;
         margin-top: 10px;
         .renwu-frisht {
            width: 120px;
         }
         .renwu-secend {
            width: 350px;
            .play-btns {
                margin-left: 10px;
            }
            .ant-input,.ant-select-selection{
            width: 100%;
            outline: none;
            border: 1px solid #C6C1C1 !important;
            width: 100%;
            }
         }
     }
 
</style>